<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=1.0,user-scalable=0" />
    <link rel="shortcut icon" href="favicon3.ico"/>
    <link rel="bookmark" href="favicon3.ico"/>
    <title>谱子解析器</title>
    <style>
        html{
            background-image: linear-gradient(black, #568FAA, #ffffff, #ffffff, #ffffff);
            background-repeat: no-repeat;
        }
        body{
            text-align: center;
        }
        body>div{
            margin: 0 auto;
            text-align: center;
            width: 22rem;
        }
        input{
            background-color: rgb(16, 138, 199);/* 背景颜色 */
            border: none;/* 边框 */
            color: white;/* 字体颜色 */
            text-align: center;/* 文字居中 */
            text-decoration: none;/* 关闭文字修饰，下划线 */
            display: inline-block;/* 忘了 */
            vertical-align: middle;/* 解决 input与 button高度不相等 */
        }
        input:active{
            background-color: blanchedalmond;
        }
        /* 消除以下三个在点击时产生边框 */
        button,input,textarea{
            outline:none;
        }
        #mainBody{
            height: 13.26rem;
            background-image: url(./背景.jpg);
            border-radius: 5%;/*设置圆角*/
                -webkit-box-shadow: 0.2rem 0.2rem 1rem #413f3f;/* 谷歌 */
                -moz-box-shadow: 0.2rem 0.2rem 1rem #413f3f;/* 火狐 */
                -o-box-shadow: 0.2rem 0.2rem 1rem #413f3f;/* Opera */
            box-shadow: 0.2rem 0.2rem 1rem #333333;
            background-repeat: no-repeat;/*只显示一次 */
            background-position: center;/*居中显示*/
            background-size: contain;
        }
        #mainBody>div{
            overflow: hidden;/*解决浮动塌陷*/
            margin-left: 0.13rem;/*设置左边距*/
            opacity: 40%;/*设置透明度*/
        }
        #mainBody>div>div{
            border-radius: 20%;/*设置圆角*/
            width: 3.6rem;
            height: 3.6rem;
            font-size: 0;/*设置为0,方便定时器使用*/
            float: left;/*向左浮动*/
            position: relative;/*相对于 mainBody的定位*/
            margin: 0.36rem 0.37rem;/*设置div之间的外边距*/
        }
        #mainBody>div>div:active{/*点击时*/
            /*background-color: blanchedalmond;*/
            background-color: rgba(255,235,205, 1);
        }
        textarea{
            width: 20rem;
            height: 10rem;
        }
        #wavPlayer{/*音乐列表，隐藏，不显示*/
            display: none;
        }
        #tip{
            padding: 0.5rem;
            margin-top: 1rem;
            text-align: left;
        }
        #tip>div{
            margin: 0.2rem;
        }
        span{
            font-size: 0.8rem;
        }
        #fileDiv{
            margin-top: 0.5rem;
        }
        #fileDiv>input{
            background-color: #00C9E4;
        }
        #fileDiv>input:active{
            background-color: blanchedalmond;
        }
        #fileTip{
            font-size: 0.8rem;
            color: #6597AE;
        }
    </style>
    <script src="./javascript.js"></script>
</head>
<body>
    <div id="main">
        <div id="wavPlayer">
            <audio id="am1"  src="./wav_default/A1.wav" preload ></audio>
            <audio id="am2"  src="./wav_default/A2.wav" preload ></audio>
            <audio id="am3"  src="./wav_default/A3.wav" preload ></audio>
            <audio id="am4"  src="./wav_default/A4.wav" preload ></audio>
            <audio id="am5"  src="./wav_default/A5.wav" preload ></audio>
            <audio id="am6"  src="./wav_default/A6.wav" preload ></audio>
            <audio id="am7"  src="./wav_default/A7.wav" preload ></audio>
            <audio id="am8"  src="./wav_default/B1.wav" preload ></audio>
            <audio id="am9"  src="./wav_default/B2.wav" preload ></audio>
            <audio id="am10" src="./wav_default/B3.wav" preload ></audio>
            <audio id="am11" src="./wav_default/B4.wav" preload ></audio>
            <audio id="am12" src="./wav_default/B5.wav" preload ></audio>
            <audio id="am13" src="./wav_default/B6.wav" preload ></audio>
            <audio id="am14" src="./wav_default/B7.wav" preload ></audio>
            <audio id="am15" src="./wav_default/C1.wav" preload ></audio>
        </div>
        <div id="mainBody">
            <div style="width: 1rem; height: 0.36rem;"></div>
            <div>
                <!-- div内部被定时器使用，故不能将audio存放于div之中，zudio的id为  a + div的id 这样方便获取 -->
                <div id="m1" onclick="exec(this)"></div>
                <div id="m2" onclick="exec(this)"></div>
                <div id="m3" onclick="exec(this)"></div>
                <div id="m4" onclick="exec(this)"></div>
                <div id="m5" onclick="exec(this)"></div>
            </div>
            <div>
                <div id="m6" onclick="exec(this)"></div>
                <div id="m7" onclick="exec(this)"></div>
                <div id="m8" onclick="exec(this)"></div>
                <div id="m9" onclick="exec(this)"></div>
                <div id="m10" onclick="exec(this)"></div>
            </div>
            <div>
                <div id="m11" onclick="exec(this)"></div>
                <div id="m12" onclick="exec(this)"></div>
                <div id="m13" onclick="exec(this)"></div>
                <div id="m14" onclick="exec(this)"></div>
                <div id="m15" onclick="exec(this)"></div>
            </div>
        </div>
        <div id="tip">
            <div>
                <input type="button" value="切换乐器模式" onclick="changeWav()">
                <span id="wavTip">乐器模式</span>
            </div>
            <div>
                <input type="button" value="切换解析模式" onclick="changeAny()">
                <span id="anyTip">解析模式</span>
            </div>
        </div>
        <div id="append">
            <textarea id="data"></textarea>
        </div>
        <div>
            <input type="button" value="声音" onclick="setVolumeNum()" id="setvolume">
            <input type="button" value="启动" onclick="start()" id="start" style="height:2rem; border-radius: 14%; margin: 1rem;">
            <input type="button" value="解析文件时清除上面的文本框√" onclick="setRemoveText()" id="removeText">
        </div>
        <div id="fileDiv">
            <input type="file" id="fileId" />
            <input type="button" value="解析文件" onclick="isFile()" style="font-size: 1.03rem;">
            <div id="fileTip"></div>
        </div>
        <div>
            <input type="number" id="delay" value="10" style="width: 4rem;" title="单位为ms">
            <input type="button" value="修改默认延迟" onclick="setDelay()">
            <br>
            <span style="font-size: 0.6rem;">默认延迟：每次点击的延迟,默认为10ms<br>在以上数据运行后会将解析后的数据输出到以下文本域中</span>
        </div>
        <div><textarea id="anyData" style="height: 1rem;"></textarea></div>
    </div>
</body>
</html>